<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>金水区</li>
        <li>二七区</li>
        <li>中原区</li>
        <li>高新区</li>
        <li>惠济区</li>
        <li>管城区</li>
        <li>东区</li>
    </ul>
    <script>
        var arr1 = [];
        for (var i = 0; i < 10; i++) {
            // 最后一个符合条件的i是9 但是因为有i++所以会在判断i<10之后 加1
            arr1[i] = function () {
                console.log(i);
            }
        }
        // console.log(arr1); 执行到这里时 i=10 所以每个函数里面打印的i也就都是10 这里的i是同一个变量
        arr1[0](); // 0  10
        arr1[4](); // 4 10
        arr1[9]();

        var arr2 = [];
        for (var i = 0; i < 10; i++) {
            (function (i) {  // 这里的i是形参，变量名可以换
                arr2[i] = function () {
                    console.log(i);
                }
            })(i) // 这个是实参 是一个具体的值 这个i就是for的计数器 变量名不能换
        }

        console.log(arr2); // 这里的i 各是各的
        arr2[0]()
        arr2[3]()
        arr2[6]()


        // ==========

        var arr3 = []; 
        // for(var i = 0; i < 10; i++) {
        //     demo(i)
        // }

        // 上面的for循环相当于调用了10次demo函数
        demo(0)
        demo(1)
        demo(2)
        demo(3)
        demo(4)
        demo(5)

        function demo (i) {
            arr3[i] = function() {
                console.log(i);
            }
        }

        arr3[0]()
        arr3[3]()
        arr3[5]()


        // ================
        // getElementsByTagName通过标签名获取元素
        // HTMLCollection html集合 是一个类数组
        var lis = document.getElementsByTagName('li');
        console.log(lis);
        for(var i=0; i<lis.length; i++) {
            lis[i].onclick = function() {
                alert(i);
            }
        }
    </script>
</body>

</html>